<template>
  <div class="dashboard-editor-container" id="Statistics">
    <el-card class="relative h-85vh">
      <template #header>
        <el-tabs v-model="GroupBy" @tab-click="handleClick">
          <el-tab-pane label="工序" :name="0"> </el-tab-pane>
          <el-tab-pane label="操作员" :name="1"> </el-tab-pane>
        </el-tabs>
      </template>
      <el-button
        type="primary"
        :icon="paged ? ArrowLeftBold : ArrowRightBold"
        @click="handlePage"
        :class="{
          'absolute h-20 w-5 top-[50%] z-100 duration-500': true,
          'page-btn': true,
          'left-[100%] translate-x-[-100%]': !paged,
          'left-0 translate-x-[0]': paged,
        }"
      ></el-button>
      <div class="absolute w-full h-[88%] overflow-y-auto mb-10 mt-[-20px]">
        <el-row class="absolute w-full h-80%">
          <el-col :span="0.5"></el-col>
          <transition :name="paged ? 'slide' : 'reslide'">
            <el-col :span="23" v-if="!paged" class="absolute w-full h-full">
              <el-row>
                <el-col :span="8">
                  <CircleBoardLg
                    title="接单"
                    :loading="dataLoading.dataLoading1"
                    :data="{
                      New_Day: statisticData.New_Day,
                      New_Month: statisticData.New_Month,
                    }"
                    abbrChar="接"
                  />
                </el-col>
                <el-col :span="8">
                  <CircleBoardLg
                    title="发货"
                    :loading="dataLoading.dataLoading1"
                    :data="{
                      OutOfStock_Day: statisticData.OutOfStock_Day,
                      OutOfStock_Month: statisticData.OutOfStock_Month,
                    }"
                    abbrChar="发"
                  />
                </el-col>
                <el-col :span="8">
                  <CircleBoard
                    :loading="dataLoading.dataLoading1"
                    title="库存"
                    :data="{
                      Stock: statisticData.Stock,
                    }"
                  />
                </el-col>
              </el-row>
              <div class="mt">
                <el-segmented
                  v-model="lineChosen"
                  :options="lineOptions"
                  style="float: left"
                >
                  <template #default="{ item }">
                    <div>{{ item.label }}</div>
                  </template>
                </el-segmented>
                <template v-if="lineChosen === 'byMonth'">
                  <LineMonth
                    :data="salesMonthData"
                    :loading="dataLoading.dataLoading5"
                  />
                </template>
                <template v-else>
                  <LineDay
                    :data="salesDayData"
                    :loading="dataLoading.dataLoading5"
                  />
                </template>
              </div>

              <LeftBottomTables
                :orderTakersData="orderTakersList"
                :salesmenData="salesmenList"
                :customerStatData="customerStatData"
                :customerAlarmData="customerAlarmData"
                :loading="dataLoading.dataLoading10"
                @changeBeginDate="changeBeginDate"
                @changeMonthTypeCS="changeMonthTypeCS"
                @changeMonthTypeCA="changeMonthTypeCA"
              />
            </el-col>
            <el-col :span="23" v-else class="absolute w-full h-full">
              <!-- <OrderBoard
            :loading="dataLoading.dataLoading1"
            :data="{
              New_Day: statisticData.New_Day,
              New_Month: statisticData.New_Month,
              NewProduce_Day: statisticData.NewProduce_Day,
              NewProduce_Month: statisticData.NewProduce_Month,
              Produce_None: statisticData.Produce_None,
              Finish_Day: statisticData.Finish_Day,
              Finish_Month: statisticData.Finish_Month,
              Stock: statisticData.OutOfStock_Day,
              OutOfStock_Month: statisticData.OutOfStock_Month,
              Stock: statisticData.Stock,
              Mark: statisticData.Mark,
              OutTime: statisticData.OutTime,
              }"
              /> -->
              <el-row :gutter="12">
                <el-col :span="8">
                  <CircleBoardLg
                    title="下单"
                    :loading="dataLoading.dataLoading1"
                    :data="{
                      NewProduce_Day: statisticData.NewProduce_Day,
                      NewProduce_Month: statisticData.NewProduce_Month,
                    }"
                    abbrChar="产"
                  />
                </el-col>
                <el-col :span="8">
                  <CircleBoardLg
                    title="入库"
                    :loading="dataLoading.dataLoading1"
                    :data="{
                      Finish_Day: statisticData.Finish_Day,
                      Finish_Month: statisticData.Finish_Month,
                    }"
                    abbrChar="入"
                  />
                </el-col>
                <el-col :span="8">
                  <CircleBoard
                    title="未下单"
                    :loading="dataLoading.dataLoading1"
                    :data="{
                      Produce_None: statisticData.Produce_None,
                    }"
                    abbrChar="未"
                  />
                </el-col>
              </el-row>

              <div class="flex mt-4 gap-20">
                <!-- <el-segmented
              v-model="pieChosen"
              :options="pieOptions"
              style="float: left"
            >
            </el-segmented>
            <template v-if="pieChosen === 'overTime'">
              <PieOverTime
                :loading="dataLoading.dataLoading3"
                :data="overTimeData"
              />
            </template>
            <template v-else>
              <PieAbnormal
              :loading="dataLoading.dataLoading4"
              :data="abnormalData"
              />
            </template> -->
                <PieOverTime
                  class="w-2/5"
                  :loading="dataLoading.dataLoading3"
                  :data="overTimeData"
                />
                <PieAbnormal
                  class="w-2/5"
                  :loading="dataLoading.dataLoading4"
                  :data="abnormalData"
                />
              </div>
            </el-col>
          </transition>
          <el-col :span="0.5"></el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import {
  statictisApi,
  trackApi,
  flagApi,
  saleStatApi,
  orderTakersApi,
  salesmenApi,
  customerStatApi,
  customerAlarmApi,
} from "@/api/order/statistics";
import { getToken, getUserId, getSiteId } from "@/utils/auth";
import { onMounted } from "vue";
import OrderBoard from "./components/OrderBoard.vue";
import CircleBoard from "./components/CircleBoard.vue";
import Track from "./components/Track.vue";
import PieOverTime from "./components/PieOverTime.vue";
import PieAbnormal from "./components/PieAbnormal.vue";
import LeftBottomTables from "./components/LeftBottomTables";
import LineMonth from "./components/LineMonth.vue";
import LineDay from "./components/LineDay.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { ArrowRightBold, ArrowLeftBold } from "@element-plus/icons-vue";
import useUserStore from "@/store/modules/user";
import CircleBoardLg from "./components/CircleBoardLg.vue";

defineOptions({ name: "Statistics" });
const state = reactive({
  statisticData: {},
  trackList: [],
  overTimeData: [],
  abnormalData: [],
  orderTakersList: [],
  salesmenList: [],
  customerStatData: [],
  customerAlarmData: [],
  salesMonthData: {},
  salesDayData: {},
  GroupBy: 0,
  pieChosen: "overTime",
  lineChosen: "byDay",
  pieOptions: [
    { label: "超时", value: "overTime" },
    { label: "异常", value: "abnormal" },
  ],
  lineOptions: [
    { label: "按日", value: "byDay" },
    { label: "按月", value: "byMonth" },
  ],
  dataLoading: {
    dataLoading1: true,
    dataLoading2: true,
    dataLoading3: true,
    dataLoading4: true,
    dataLoading5: true,
    dataLoading6: true,
    dataLoading7: true,
    dataLoading8: true,
    dataLoading9: true,
    dataLoading10: true,
  },
  customerStatPageLoading: false,
  customerAlarmPageLoading: false,
  // 饼图和折线图分开两页展示
  paged: false,
});
const {
  pieChosen,
  GroupBy,
  statisticData,
  trackList,
  pieOptions,
  overTimeData,
  abnormalData,
  salesMonthData,
  salesDayData,
  lineChosen,
  lineOptions,
  orderTakersList,
  salesmenList,
  customerStatData,
  customerAlarmData,
  dataLoading,
  customerStatPageLoading,
  customerAlarmPageLoading,
  paged,
} = toRefs(state);

//分页切换事件注入
provide("customerStatPagin", customerStatPagin);
provide("customerStatPageLoading", customerStatPageLoading);
async function customerStatPagin(pageNum) {
  customerStatPageLoading.value = true;
  const res9 = await customerStatApi({ pageIndex: pageNum });
  if (res9.IsSuccess) {
    customerStatData.value = res9;
    customerStatPageLoading.value = false;
  }
}

//分页切换事件注入
provide("customerAlarmPagin", customerAlarmPagin);
provide("customerAlarmPageLoading", customerAlarmPageLoading);
async function customerAlarmPagin(pageNum) {
  customerAlarmPageLoading.value = true;
  const res10 = await customerAlarmApi({ pageIndex: pageNum });
  if (res10.IsSuccess) {
    customerAlarmData.value = res10;
    customerAlarmPageLoading.value = false;
  }
}

onMounted(async () => {
  try {
    await getData();
  } catch (error) {
    // ElMessageBox.confirm(`${error}`, "系统提示", {
    //   confirmButtonText: "确定",
    //   cancelButtonText: "取消",
    //   type: "warning",
    // })
    //   .then((res) => {
    for (let i = 1; i <= 10; i++) {
      dataLoading.value["dataLoading" + i] = false;
    }
    // })
    // .catch((_) => {
    //   for (let i = 1; i <= 10; i++) {
    //     dataLoading.value["dataLoading" + i] = false;
    //   }
    // });
  }
});
async function handleClick() {
  getData();
}
async function getData() {
  let data = {
    AccessToken: getToken(),
    SiteId: getSiteId(),
    UserId: getUserId(),
    GroupBy: GroupBy.value,
  };
  const res = await statictisApi(data);
  if (res.IsSuccess) {
    statisticData.value = res;
    for (let key in statisticData.value) {
      if (String(statisticData.value[key]).includes("/")) {
        statisticData.value[key] = statisticData.value[key].split("/");
      }
    }
    dataLoading.value.dataLoading1 = false;
  }
  const res2 = await trackApi(data);
  if (res2.IsSuccess) {
    trackList.value = res2.Data;
  }
  const res3 = await flagApi({ Flag: 2 });
  if (res3.IsSuccess) {
    overTimeData.value = res3.Data.map((item) => {
      return {
        value: item.Count,
        name: item.StatisticName,
      };
    });
    dataLoading.value.dataLoading3 = false;
  }
  const res4 = await flagApi({ Flag: 3 });
  if (res4.IsSuccess) {
    abnormalData.value = res4.Data.map((item) => {
      return {
        value: item.Count,
        name: item.StatisticName,
      };
    });
    dataLoading.value.dataLoading4 = false;
  }

  // 销售统计按月
  const res5 = await saleStatApi({ Type: 1 });
  if (res5.IsSuccess) {
    salesMonthData.value = res5;
    dataLoading.value.dataLoading5 = false;
  }
  // 销售统计按日
  const res6 = await saleStatApi({ Type: 2 });
  if (res6.IsSuccess) {
    salesDayData.value = res6;
    dataLoading.value.dataLoading5 = false;
  }

  const res7 = await orderTakersApi();
  if (res7.IsSuccess) {
    orderTakersList.value = res7.StatisticList;
  }
  const res8 = await salesmenApi();
  if (res8.IsSuccess) {
    salesmenList.value = res8.StatisticList;
  }
  const res9 = await customerStatApi();
  if (res9.IsSuccess) {
    customerStatData.value = res9;
  }
  const res10 = await customerAlarmApi();
  if (res10.IsSuccess) {
    customerAlarmData.value = res10;
  }
  dataLoading.value.dataLoading10 = false;
}

//左下角表格切换时间
async function changeBeginDate({ date, tableIndex }) {
  switch (tableIndex) {
    //接单员表
    case 0:
      dataLoading.value.dataLoading10 = true;
      const res7 = await orderTakersApi({ BeginDate: date });
      orderTakersList.value = res7.StatisticList;
      dataLoading.value.dataLoading10 = false;
      break;
    //业务员表
    case 1:
      dataLoading.value.dataLoading10 = true;
      const res8 = await salesmenApi({ BeginDate: date });
      salesmenList.value = res8.StatisticList;
      dataLoading.value.dataLoading10 = false;
      break;
  }
}
async function changeMonthTypeCS(cur) {
  const res9 = await customerStatApi({ MonthType: cur });
  if (res9.IsSuccess) {
    dataLoading.value.dataLoading10 = true;
    customerStatData.value = res9;
    dataLoading.value.dataLoading10 = false;
  }
}
async function changeMonthTypeCA(cur) {
  const res10 = await customerAlarmApi({ MonthType: cur });
  if (res10.IsSuccess) {
    dataLoading.value.dataLoading10 = true;
    customerAlarmData.value = res10;
    dataLoading.value.dataLoading10 = false;
  }
}
function handlePage() {
  paged.value = !paged.value;
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 16px;
  background-color: rgb(240, 242, 245);
  position: relative;
  overflow-y: scroll;
  max-height: calc(100vh - 84px);
}

:deep(.el-card__header) {
  border-bottom: none;
}
.page-btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* 进入前和离开后的样式 */
.slide-enter-from {
  transform: translateX(100%);
  opacity: 0;
}
.slide-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}

/* 进入和离开的动画 */
.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s ease;
}

/* 进入后的样式 */
.slide-enter-to {
  opacity: 1;
  transform: translateX(0);
}

/* 离开前的样式 */
.slide-leave-from {
  opacity: 1;
  transform: translateX(0);
}
/* 进入前和离开后的样式 */
.reslide-enter-from {
  transform: translateX(-100%);
  opacity: 0;
}
.reslide-leave-to {
  transform: translateX(100%);
  opacity: 0;
}

/* 进入和离开的动画 */
.reslide-enter-active,
.reslide-leave-active {
  transition: all 0.5s ease;
}

/* 进入后的样式 */
.reslide-enter-to {
  transform: translateX(0);
  opacity: 1;
}

/* 离开前的样式 */
.reslide-leave-from {
  transform: translateX(0);
  opacity: 1;
}
// .hide-scrollbar{
//   scrollbar-width: none;
// }
.hide-scrollbar {
  scrollbar-width: 0;
}
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
</style>
